import React, {useState} from "react";
import {Typography} from "antd";
import {ButtonComp, InputComp, MoneyInput, TableComp, DatePicker, ComponentType, DateComp} from 'jh-lib'

import {formatMoney, getRandomKey} from "jh-utils";

const {Text} = Typography;

const Demo = (props) => {
    const tdata = [];
    for (let i = 0; i < 2; i++) {
        tdata.push({
            key: getRandomKey(),
            date: (1585741182 + i * 1000) * 1000,
            amount: i + 1,
            type: `${i+1}`,
            note: "transfer"
        });
    }
    const [tRef, setTRef] = useState(tdata);
    const [data, setData] = useState(tdata);
    const [l, setL] = useState(2);
    const [columns, setColumns] = useState([
        {
            remark: '日期',
            name: 'date',
            floatNum: '',
            sum: false,
            reg: '',
            expression: '',
            format: 'YYYY-MM-DD HH:mm:ss',
            align: '',
            colWidth: 200,
            editable: true,
            editingSetting: (value, record, rowIndex, moreProps) => {

                return {
                    options: {
                        initialValue: +new Date()
                    },
                    comp: <DateComp autoFocus={true} showTime {...moreProps}/>
                }
            }
        },
        {
            remark: '金额',
            name: 'amount',
            floatNum: 2,
            sum: true,
            reg: '',
            expression: '',
            format: '',
            align: 'right',
            colWidth: 100,
            sorter: (a, b) => a.amount - b.amount,
            editable: true,
            editingSetting: (value, record, rowIndex, moreProps) => {
                return {
                    options: {
                        initialValue: value
                    },
                    comp: <MoneyInput autoFocus={true} {...moreProps}/>
                }
            }
        },
        {
            remark: '类型',
            name: 'type',
            floatNum: '',
            sum: false,
            reg: '',
            expression: '',
            format: '',
            align: '',
            colWidth: 100,
            selector: 'TEST',
            componentType: ComponentType.COMBO_BOX
        },
        {
            remark: 'Note',
            name: 'note',
            floatNum: '',
            sum: false,
            reg: '',
            expression: '',
            format: '',
            align: '',
            colWidth: 100,
            editable: true,
            editingSetting: (value, record, rowIndex, moreProps) => {
                return {
                    options: {
                        initialValue: value
                    },
                    comp: <InputComp autoFocus={true} {...moreProps}/>
                }
            }
        },
        {
            remark: 'Note1',
            name: 'note1',
            floatNum: '',
            sum: false,
            reg: '',
            expression: '',
            format: '',
            align: '',
            colWidth: 100,
            editable: true,
            editingSetting: (value, record, rowIndex, moreProps) => {
                return {
                    options: {
                        initialValue: value
                    },
                    comp: <InputComp autoFocus={true} {...moreProps}/>
                }
            }
        },
        {
            remark: 'Note2',
            name: 'note2',
            floatNum: '',
            sum: false,
            reg: '',
            expression: '',
            format: '',
            align: '',
            colWidth: 100,
            editable: true,
            editingSetting: (value, record, rowIndex, moreProps) => {
                return {
                    options: {
                        initialValue: value
                    },
                    comp: <InputComp autoFocus={true} {...moreProps}/>
                }
            }
        },
        {
            remark: 'Note3',
            name: 'note3',
            floatNum: '',
            sum: false,
            reg: '',
            expression: '',
            format: '',
            align: '',
            colWidth: 100,
            editable: true,
            editingSetting: (value, record, rowIndex, moreProps) => {
                return {
                    options: {
                        initialValue: value
                    },
                    comp: <InputComp autoFocus={true} {...moreProps}/>
                }
            }
        },
        {
            remark: 'Note4',
            name: 'note4',
            floatNum: '',
            sum: false,
            reg: '',
            expression: '',
            format: '',
            align: '',
            colWidth: 100,
            editable: true,
            editingSetting: (value, record, rowIndex, moreProps) => {
                return {
                    options: {
                        initialValue: value
                    },
                    comp: <InputComp autoFocus={true} {...moreProps}/>
                }
            }
        },
        {
            remark: '操作',
            name: '',
            key: 'action',
            floatNum: '',
            sum: false,
            reg: '',
            expression: '',
            format: '',
            align: '',
            colWidth: 100,
            render: () => <a onClick={() => {
                console.log('a')
            }}>Delete</a>
        },
        // {
        //     title: "Date",
        //     dataIndex: "date",
        //     key: "date",
        //     width: '8%',
        // },
        // {
        //     title: "Amount",
        //     dataIndex: "amount",
        //     key: "amount",
        //     width: 100,
        //     sorter: (a, b) => a.amount - b.amount
        // },
        // {
        //     title: "Type",
        //     dataIndex: "type",
        //     key: "type",
        //     width: 100,
        // },
        // {
        //     title: "Note",
        //     dataIndex: "note",
        //     key: "note",
        //     width: 100
        // },
        // {
        //     width: 100,
        //     title: "Action",
        //     key: "action",
        //     render: () => <a onClick={() => {
        //         console.log('a')
        //     }}>Delete</a>
        // }
    ]);

    const scroll = {
        y: 300,
        // x: 800
    };

    const columnss = [
        {
            key: 'bank',
            dataIndex: 'bank',
            title: ('银行编码'),
            render: (val, record, rowInd) => {
                return val ? val.code : '';
            }
        },
        {
            key: 'bankName',
            dataIndex: 'bankName',
            title: ('银行名称'),
            render: (val, record, rowInd) => {
                return record.bank ? record.bank.name : '';
            }
        },
        {
            key: 'bankAccount',
            dataIndex: 'bankAccount',
            title: ('银行账号'),
            render: (val, record, rowInd) => {
                return val ? val.name : '';
            }
        },
        {
            key: 'qcAmount',
            dataIndex: 'qcAmount',
            align: 'right',
            title: ('期初金额'),
            render: (val, record, rowInd) => {
                return formatMoney(val);
            }
        },
        {
            key: 'dfAmount',
            dataIndex: 'dfAmount',
            align: 'right',
            title: ('贷方金额'),
            render: formatMoney
        },
        {
            key: 'jfAmount',
            dataIndex: 'jfAmount',
            align: 'right',
            title: ('借方金额'),
            render: formatMoney
        },
        {
            key: 'qmAmount',
            dataIndex: 'qmAmount',
            align: 'right',
            title: ('期末余额'),
            render: formatMoney
        }
    ];
    return (
        <>
            <ButtonComp onClick={() => {
                let t = [];
                for (let i = 100; i < 200; i++) {
                    t.push({
                        key: i + 1,
                        date: (+new Date) + i,
                        amount: i + 1,
                        type: "income",
                        note: "transfer"
                    });
                }
                setData(t)
            }}>Change data</ButtonComp>
            <ButtonComp onClick={() => {
                console.log('getAjaxData()', tRef.getAjaxData());
                console.log('getAjaxData(false)', tRef.getAjaxData(false));
            }}>getAjaxData</ButtonComp>
            <ButtonComp onClick={() => {
                alert(`hadChanged: ${tRef.hadChanged()}` );
            }}>hadChanged</ButtonComp>
            <TableComp
                onRef={(ref) => {setTRef(ref)}}
                style={{height: 500}}
                columns={columns}
                dataSource={data}
                // scroll={scroll}
                needNO={true}
                // canSort={true}
                // pagination={{defaultPageSize: 20}}
                // pagination={false}
                l={l}
                // r={2}
            />
            <TableComp
                style={{height: 500}}
                colsConf={columns}
                dataSource={data}
                scroll={scroll}
                needNO={true}
                canSort={true}
                // pagination={{defaultPageSize: 20}}
                pagination={false}
                onCellUpdate={(dataIndex, newRecord) => {
                    if('amount' === dataIndex) {
                        newRecord.type = getRandomKey();
                    }
                }}
                l={l}
                r={2}
            />
        </>
    );
};

export default Demo;
